<template>
    <div class="div">
        <div class="content">
            <div class="left">
                <img src="./img/bg2.png" alt="">
            </div>
            <div class="right">
                <h1>注册新用户</h1>
                <input type="text" placeholder="用户名：6位以上数字和字母组成" v-model="user.username">
                <input type="text" placeholder="密码" v-model="user.password">
                <input type="text" placeholder="学校" v-model="user.school">
                <input type="text" placeholder="昵称" v-model="user.nickname">
                <input type="text" placeholder="请输入年龄" v-model="user.age">
                <input type="text"  v-model="user.gender">
                <div>已有账号？去<router-link to=/login>登录</router-link></div>
                <button @click="jump">注册</button>
            </div>
        </div>
    </div>
</template>
<script>
import{post}from '../utils/fecth'
export default ({
    name:'regist',
    data(){
        return{
            user:{}
        }
    },
    methods:{
        async jump(){
            // console.log(this.regist)
            const data = await post('user/regist',{
                    username:this.user.username,
                    password:this.user.password,
                    school:this.user.school,
                    nickname:this.user.nickname,
                    age:this.user.age,
                    gender:this.user.gender
            }).then( res =>{
                console.log(res)
                if(res.success == true){
                    this.$router.push({
                        name:'login'
                    })
                }
            }).catch( err => {
                console.log(err)
            })
            console.log(data)
        }
    }
})
</script>
<style lang="scss">
.div{
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    .content{
        width: 70%;
        height: 600px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }
    .left{
        width: 45%;
        img{
            width: 100%;
        }
        
    }
    .right{
        width: 45%;
        display: block;
        text-align: center;
        input{
            width: 300px;
            height: 40px;
            margin-bottom: 20px;
            border: solid 1px rgb(174, 174, 201);
            border-radius: 8px;
        }
        a{
            color: #aba6e4;
        }
        button{
            width: 300px;
            height: 40px;
            margin-bottom: 30px;
            color: white;
            background-color: #6963d0;
            border: solid 1px #6963d0;
            border-radius: 3px;
        }
        
    }
</style>